<template>
    <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>

    <div class="map-demo-wrap animated" :class="{'fold':!menuStatusRef,'bounceInLeft':menuStatusRef}">
        <p class="title">maptalks demo</p>
        <ul class="menu-list">
            <el-scrollbar>
                <li class="menu ellipsis" :title="menu.name"
                    v-for="(menu,index) in mapDemoListRef" :key="menu.id" @click="toggleMapDemo(menu)">
                    {{ index < 9 ? `0${index + 1}` : index + 1 }}、{{ menu.name }}
                </li>
            </el-scrollbar>
        </ul>
        <span class="collapse" @click="menuStatusRef=!menuStatusRef">
            <i class="fa"
               :class="{'fa-angle-double-left':menuStatusRef,'fa-angle-double-right':!menuStatusRef}"></i>
            {{ menuStatusRef ? "收起" : "展开" }}
        </span>
    </div>
</template>

<script>
import {ref} from "vue";
import Maptalks from "@/components/common/Maptalks.component.vue"
import useMapDemo from "@/hooks/useMapDemo"

export default {
    name: "Home",
    components: {Maptalks},
    setup() {
        const {menuStatusRef, mapDemoListRef, toggleMapDemo} = useMapDemo()

        // map对象
        let mapStore = ref({});
        let mapOnLoadCB = (map) => {
            mapStore.value = map;
        };

        return {
            menuStatusRef,
            mapDemoListRef,
            toggleMapDemo,
            mapOnLoadCB
        }
    }
}
</script>
<style lang="less" scoped>
@import "~@/common/css/common.style.less";
.map-demo-wrap {
    position: absolute;
    left: 5px;
    top: 5px;
    background: #fff;
    width: 300px;
    height: calc(100% - 30px);
    text-align: left;
    padding: 10px;
    border-radius: 5px 0 5px 5px;
    transition: all ease 0.5s;
    &.fold {
        left: -320px
    }
    .title {
        font-size: 18px;
        font-weight: bold;
        background-color: cadetblue;
        color: #fff;
        padding: 10px;
        border-radius: 5px;
    }
    .menu-list {
        width: 100%;
        height: calc(100% - 40px);
        overflow: auto;
        .menu {
            list-style: none;
            line-height: 24px;
            cursor: pointer;
            padding: 5px;
            border-radius: 5px;
            &:hover {
                background-color: darkcyan;
                color: #ffffff
            }
        }
    }
    .collapse {
        position: absolute;
        right: -55px;
        top: 0;
        background-color: #fff;
        padding: 5px 10px;
        border-radius: 0 10px 10px 0;
        font-size: 12px;
        cursor: pointer;
        i {
            margin-right: 5px
        }
    }
}
</style>